import React, {useEffect, useState} from 'react'
import './index.scss'
import Navi from "@/components/Head/Navi";
import User from "@/components/Head/User";
import Search from "@/components/Head/Search";

import config from "@/config/config";
import LoginModal from "@/components/Head/LoginModal";
import {getToken} from "@/common/util";

const head = config.head

const Header: React.FC<any> = () => {

  // 关闭/显示登录弹窗
  const [loginModal, setLoginModal] = useState(false)
  const [activeCate, setActiveCate] = useState(1)

  return (
    <header className='com-head'>
      <div className='head'>
        <div className='left'>
          <span className='logo'>{head.logo}</span>
          <span className='cut-off'>|</span>
          <span className='title'>{head.title}</span>
        </div>

        <Navi switchCategory={(categoryId: number) => setActiveCate(categoryId)} activeCate={activeCate}/>

        <div className='right'>
          <Search/>
          <User openLoginModel={() => setLoginModal(true)} activeCate={activeCate}/>
        </div>
      </div>

      {loginModal && <LoginModal close={() => setLoginModal(false)}/>}
    </header>
  )
}

export default Header
